<template>
    <div v-if="this.$store.state.cfgl">
      <div v-if="this.$store.state.chumanage">
                <!--1-->
                <el-row class="nav_a_top">
                    <el-col :span="12"><div class="grid-content bg-purple">厨房管理</div></el-col>
                    <el-col :span="12" ><div @click="addcanguiclick" class="grid-content bg-purple-light"><div class="nav_a_top_div">添加厨房</div></div></el-col>
                </el-row>
                <!--2-->
                <form class="dingdan_form">
                        <input type="text" placeholder="公司名称">
                        <input type="text" placeholder="状态">
                        <button class="dingdan_form_shaixuan">筛选</button>
                </form>
                <!--3-->
                <table class="nav_a_table fs12">
                            <tr>
                                <td>编号</td>
                                <td>公司名称</td>
                                <td>详细地址</td>
                                <td>联系人</td>
                                <td>手机号</td>
                                <td>添加时间</td>
                                <td>管理人员</td>
                                <td>状态</td>
                                <td>配送餐柜</td>
                                <td>操作</td>
                            </tr>
                           <tr  v-for="list in this.$store.state.cfgl.data.data">
                                <td>{{list.admin_id}}</td>
                                <td>{{list.service_city}}</td>
                                <td>{{list.address}}</td>
                                <td>{{list.contact}}</td>
                                <td>{{list.mobile}}</td>
                                <td>{{list.created_at}}</td>
                                <td>{{list.name}}</td>
                                <td>{{list.status}}</td>
                                <td><button class="nav_a_button">海汇中心001柜</button><button class="nav_a_button" @click="newaddcangui">新增餐柜</button></td>
                                <td><button class="nav_a_button">禁用</button><button class="nav_a_button" @click="modifi(list)">修改</button></td>
                            </tr>
                </table>   
                <!--点击修改-->
                <div v-if="xiugai" class="xiugai"></div>
      </div>
      <div v-if="this.$store.state.chuadd">
            <addchufang @save="saveData"></addchufang>
      </div>
      <div v-if="newshowcangui" class="newadd">
            <div>
                <!--4.1-->
                <form class="dingdan_form1" @submit.prevent="submitQuery">
                        <el-row class="nav_a_top">
                            <el-col :span="12" style="text-align:right">厨房管理&emsp;&emsp;</el-col>
                            <el-col :span="12" ><div @click="closeright" class="rightstyle fs17" >X</div></el-col>
                        </el-row>
                        <div class="special">
                            <div class="search">
                                <input type="search" placeholder="单行输入" ref="search">
                            </div>
                            <div class="special_div2">
                                <div v-for="(list,index) in this.$store.state.cfgl.data.data" class="special_div2_each1">
                                    <div v-for="list1 in queryDate(list.cabinet)" class="special_div2_each2">
                                       <input type="checkbox" class="floatspan1" :checked="list1.checks == 0 ? false : true" >
                                       <span>{{list1.name}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <div class="tijiao">提交</div>
                </form>
            </div>
      </div>
    </div>
</template>
<script>
    
import addchufang from './cangui_addchufang.vue'
import axios from 'axios'
export default {
  name:'cfgl',
  updated () {
    //   debugger  
  },
  data () {
    return {
        newshowcangui:false,
        checkedNames:"checked",
        // 搜索
        query: '',
        xiugai:false,
        data:null,
        name:'',
        status:'1',
        page:'1',
        data:null,
    }
  },
  components:{
      addchufang,
  },
  methods:{
      //   搜索事件
      submitQuery:function(){
         this.query = this.$refs.search.value.trim();
      },
      queryDate:function(list){
          if (this.query === '') {
              return list
          } else {
            return list.filter((item)=>{
                if(item.name.indexOf(this.query) != -1){
                    return item;
                }
            })
          }
      },
      saveData (data) {
          console.log('子组件调用了自定义保存事件')
          console.log(data);
          axios.get(data)
      },
      modifi:function(item){
        console.log(item)
      },
    //   搜索事件结束
      addcanguiclick:function(){
          this.$store.state.chumanage=false,
          this.$store.state.chuadd=true
      },
      newaddcangui:function(){
        this.newshowcangui=true,
        this.$store.state.chumanage=true,
        this.$store.state.chuadd=false
      },
      closeright:function(){
        this.newshowcangui=false,
        this.$store.state.chumanage=true,
        this.$store.state.chuadd=false
      },
  },
  filters:{
  },
  mounted:function(){
       //查询厨房 get请求  
    this.$store.dispatch('getget', { url: this.$store.state.ip + this.$store.state.geturl.url1 + '?name='+this.name + '&limit='+20 + '&status='+this.status + '&page='+this.page, selected: 'cfgl' });
    // axios.get(this.$store.state.ip + this.$store.state.geturl.url1 + '?name='+this.name + '&limit='+20 + '&status='+this.status + '&page='+this.page).then((res)=>{
    //     console.log(res.data.data);
    //      this.data = res.data.data;
    //      console.log( this.data);
    // })
}
  
}
</script>
<style scoped>
/*1*/
.nav_a_top{height: 40px;background-color: white;padding: 10px;}
.nav_a_top>div:nth-child(2){text-align: center;}
.nav_a_top_div{width: 100px;float: right;border: 1px solid #A9A9A9;}
/*2*/
.dingdan_form{margin: 25px 0px 45px 0px;}
.dingdan_form input{padding: 4px 0px 4px 7px;}
.nav_sel{padding: 4px 0px 4px 7px;box-sizing: border-box;width: 181px;margin-left: 10px;position:relative ;top:2px;}
.dingdan_form_shaixuan{background-color: white;border: 1px solid #bbb;width: 80px;height: 30px;display: inline-block;border-radius: 7px;margin-left: 10px;background-color: #bbb;}
/*3*/
.nav_a_table>tr:nth-child(1) td{padding: 15px 20px;background-color: #cdcdcd;border: 1px solid #bbbbbb;box-sizing: border-box;text-align: center}
.nav_a_table>tr td{padding: 15px 20px;background-color: white;border: 1px solid #bbbbbb;box-sizing: border-box;}
.nav_a_button{padding: 3px;box-sizing: border-box;margin-right:5px;}
.nav_a_table table{padding: 3px;}
/*4*/
  /*4.1*/
.newadd{width: 100%;height: 100%;background: rgba(0, 0, 0,0.3);position: fixed;top: 0px;}
.newadd>div{opacity: 1;background-color: #fff;width: 880px;height: 600px;position: absolute;top: 50%;left: 50%;margin-left: -550px;margin-top: -300px;}
.mattop{margin-top: 30px; }
.mattop1{margin-top:50px; }
.rightstyle{text-align:right;margin-right: 30px;}
  /*4.2*/
.special{width: 880px;height: 400px;padding: 15px;}
.dingdan_form1 .search{margin-bottom: 15px;text-align: center;}
.dingdan_form1 .search input{padding: 4px 0px 4px 7px;}
.dingdan_form1 .shangchuan{display: inline-block;width: 80px;height: 28px;line-height: 28px !important;border-radius: 6px;border: 1px solid #bbb;background-color: white;text-align: center;line-height: 30px;position: relative;top: 2px;margin-left: 30px;}
  /*4.3*/
.special_div2{width:830px;height: 400px;overflow-y: scroll;background-color: #ddd;}
.special_div2_each1{width: 100%;border-bottom:1px solid gray}
.special_div2_each2{width: 30%;display: inline-block;text-align: center;}
  /*4.4*/
.tijiao{margin-top: 85px;;width: 200px;height: 50px;background-color: white;line-height: 50px;text-align: center;border: 1px solid #bbb;border-radius: 10px;position: relative;left: 50%;margin-left: -150px;}

</style>